<template>
	<u-skeleton :loading="isFirst" rows="5">
		<view class="">


			<view>

				<view class="box">
					<u-tabs :list="list" :itemStyle="{ width: '42%',marginBottom:'20rpx',marginTop:'20rpx'}"
						:current="current" active-color="#30B1B7" lineColor="red" lineWidth="40"
						@change="tagChange"></u-tabs>


					<view v-if="current == 0">

						<view class="error_round">
							<view class="round" style="margin-top: 15px;margin-bottom: 15px;">
								<!-- <view class=""> -->
								{{error_data.allCount}}
								<view class="son" style="font-weight: 400; font-size: 36rpx;">
									错题数
								</view>
								<!-- </view> -->

							</view>

							<view class="big_button">
								<u-button type="primary" style="border-radius: 20px;" @click="allError" :disabled="error_data.allCount==0">全部错题</u-button>
							</view>
						</view>


						<view class="boxShadow">
							<u-cell-group v-if="error_data.dayData">
								<u-cell isLink @click="dayErrorTopic">
									<template #title>
										<view class="icon iconfont icon-naozhong" style="float: left;font-size: 36rpx;">
											<text
												style="font-weight: 600;padding-left:5rpx;font-size: 26rpx;">今日错题</text>
										</view>

									</template>
									<template #value>
										<view v-if="error_data.dayData.length!=0">
											共错 {{error_data.dayData[0].count}} 题
										</view>
										<view v-else>
											共错 0 题
										</view>
									</template>
								</u-cell>
							</u-cell-group>
						</view>

						<view class="">
							<u-cell-group>
								<u-cell isLink @click="allError">
									<template #title>
										<view class="icon iconfont icon-shuxing" style="float: left;font-size: 36rpx;">
											<text style="font-weight: 600;padding-left:5rpx;font-size: 26rpx;">其他</text>
										</view>

									</template>
									<template #value>
										<view>{{error_data.allCount}}题</view>
									</template>
								</u-cell>
							</u-cell-group>
						</view>


						<view class="big_button" style="margin-top: 60rpx;">
							<u-modal :show="error_show" @confirm="clearAllErrors" ref="uModal" :asyncClose="true"
								showCancelButton @cancel="error_show=false">确认要清空错题吗？</u-modal>
							<u-button type="primary" style="border-radius: 20px;"
							:disabled="error_data.allCount==0"
								@click="error_show=true">清空错题</u-button>
						</view>

					</view>
					<view v-if="current == 1">

						<view class="error_round">
							<view class="round" style="margin-top: 15px;margin-bottom: 15px;">
								<!-- <view class=""> -->
								{{likeCount}}
								<view class="son" style="font-weight: 400; font-size: 36rpx;">
									收藏数
								</view>
								<!-- </view> -->

							</view>

							<view class="big_button">
								<u-button type="primary" style="border-radius: 20px;" @click="allLike"
									:disabled='like_data.data.length==0'>全部收藏</u-button>
							</view>
						</view>




						<view class="" v-if="like_data">
							<view class="boxShadow" v-if="like_data.data.length!=0 && likeTrue==false">
								<u-cell-group>
									<u-cell isLink @click="">
										<template #title>
											<view class="icon iconfont icon-shuxing"
												style="float: left;font-size: 36rpx;">
												<text
													style="font-weight: 600;padding-left:5rpx;font-size: 26rpx;">其他</text>
											</view>

										</template>
										<template #value>
											<view v-if="like_data.data">{{like_data.data[0].count}}题</view>
											<view v-else>0题</view>
										</template>
									</u-cell>
								</u-cell-group>
							</view>
							<view class="" v-if="like_data.data.length==0 || likeTrue==true">
								<u-empty style="" text="暂时没有收藏" icon="../../../../static/imgs/data.png">
								</u-empty>
							</view>
						</view>


						<view class="big_button" style="margin-top: 60rpx;">
							<u-modal :show="like_show" @confirm="clearAllLicks" ref="uModal" :asyncClose="true"
								@cancel="like_show=false" showCancelButton>确认要清空收藏吗？</u-modal>
							<u-button type="primary" style="border-radius: 20px;" :disabled='like_data.data.length==0'
								@click="()=>like_show=true">清空收藏</u-button>
						</view>
					</view>

				</view>

			</view>
		</view>
	</u-skeleton>
</template>

<script>
	import {
		GetMyCuotiben,
		GetMyLikes,
		ClearWrongQuestions,
		DeleteLikeQuestion
	} from '../../../../api/brush_questions.js';
	export default {
		data() {
			return {
				list: [{
						name: '错题本'
					},
					{
						name: '收藏题目'
					},
				],
				error_data: [],
				like_data: [],
				current: 0,
				likeTrue: false,
				isFirst: true,
				like_show: false,
				error_show: false,
				likeCount:0
			}
		},
		onShow() {
			// this.getMyCuotiben();
			// this.getMyLikes();
			this.getData();
		},
		methods: {
			/**
			 * 清空收藏
			 */
			clearAllLicks() {
				DeleteLikeQuestion({}).then(res => {
					if (res.result === 0) {
						setTimeout(() => {
							this.like_show = false;
						}, 1000)
						uni.showToast({
							icon: "none",
							title: res.message
						})
						this.like_data.data.length = 0;
						this.likeCount=0;
						// this.$router.go(0);
						this.likeTrue = true;
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
			},
			/**
			 * 清空错题
			 */
			clearAllErrors() {
				ClearWrongQuestions().then(res => {
					if (res.result === 0) {
						uni.showToast({
							icon: "none",
							title: res.message
						});
						this.error_data.allCount=0;
						this.error_data.allData=[];
						this.error_data.dayData=[];
						this.error_data.toDayCount=0;
						this.error_show=false;
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
			},
			/**
			 * 跳转我的收藏页面
			 */
			allLike() {
				uni.navigateTo({
					url: "/pages/brush_questions/error_book/like_topic/like_topic"
				})
			},
			/**
			 * 跳转错题题目页面
			 */
			allError() {
				uni.navigateTo({
					url: "/pages/brush_questions/error_book/error_topic/error_topic"
				})
			},
			/**
			 * 今日错题
			 */
			dayErrorTopic() {
				uni.navigateTo({
					url: "/pages/brush_questions/error_book/error_topic/error_topic?type=1"
				})

			},
			/**
			 * 获取错题收藏页面数据
			 */
			getData() {
				Promise.all([GetMyCuotiben({}), GetMyLikes({})]).then(res => {
					let result = res.every(d => d.result == 0);
					if (!result) {
						uni.showToast({
							icon: "none",
							title: "数据异常,如有疑问请联系管理员处理"
						});
					}
					console.log(res);
					this.error_data = res[0].data;
					this.like_data = res[1].data;
					this.likeCount = res[1].data.total;
					if (res[1].data.total != 0) {
						this.likeTrue = false
					} else {
						this.likeTrue = true
					}
					this.isFirst = false;
				})
			},
			/**标签页改变事件
			 * @param {Object} index
			 */
			tagChange(index) {
				this.current = index.index;
				//如报错则用this.current = index代替上行
			},

			/**
			 * 我的错题本数据
			 */
			// getMyCuotiben(){
			// 	GetMyCuotiben({}).then(res=>{
			// 	   console.log(res,"kdsakfnkdsn");
			// })
			// },
			/**
			 * 我的收藏数据
			 */
			// getMyLikes(){
			// 	GetMyLikes({}).then(res=>{
			// 		console.log(res);
			// 	})
			// }
		}
	}
</script>

<style>
	.error_round {
		margin: auto;
		text-align: center;
		position: relative;
		/* border: 1px solid red; */
		height: 430rpx;
	}

	.round {
		margin: auto;
		width: 300rpx;
		height: 300rpx;
		border-radius: 50%;
		line-height: 250rpx;
		background-image: linear-gradient(to right, rgb(0, 116, 255), rgb(0, 196, 255));
		color: #fff;
		font-size: 50rpx;
		font-weight: 600;
	}

	.son {
		position: absolute;
		top: 70rpx;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
	}
</style>